<template>
<transition name="van-fade">
  <div class="registered" v-cloak v-show="visible">
    <van-nav-bar title="用户注册" left-arrow @click-left="onClickLeft" />
    <div class="form">
      <van-cell-group>
        <van-field
          v-model.lazy.trim="uname.username"
          label="用户名称"
          type="text"
          placeholder="请输入用户名"
          :error-message="uname.tip"
          required
          @blur="checkUname()"
        />
        <van-field
          v-model.lazy.trim="uphone.phone"
          label="手机号码"
          type="phone"
          placeholder="请输入手机号"
          :error-message="uphone.tip"
          required
          @blur="checkUphone()"
        />
        <van-field
          v-model.lazy.trim="uaccount.account"
          label="注册账号"
          type="text"
          placeholder="请输入注册账号"
          :error-message="uaccount.tip"
          required
          @blur="checkUaccount()"
        />
        <van-field
          v-model.lazy.trim="upwd.pwd"
          label="注册密码"
          type="password"
          placeholder="请输入注册密码"
          :error-message="upwd.tip"
          required
          @blur="checkUpwd()"
        />

        <van-field
          v-model.lazy.trim="unewpwd.newpwd"
          label="确认密码"
          type="password"
          placeholder="请再次输入注册密码"
          :error-message="unewpwd.tip"
          required
          @blur="checkUnewpwd()"
        />
      </van-cell-group>

      <van-button
        type="primary"
        size="large"
        class="btn"
        @click="toRegistered()"
        >立即登录</van-button
      >
      <van-button type="danger" size="large" class="btn reset" @click="Reset()"
        >重置</van-button
      >
      <p @click="goL()" v-cloak>已有账号?去登录</p>
    </div>
  </div>
</transition>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Registered",
  data() {
    return {
      uname: {
        username: "",
        tip: "用户名不为空",
      },
      uphone: {
        phone: "",
        tip: "请输入11位手机号",
      },
      uaccount: {
        account: "",
        tip: "账号长度不小于3位",
      },
      upwd: {
        pwd: "",
        tip: "请输入长度为6位或者长度大于6位的密码",
      },

      unewpwd: {
        newpwd: "",
        tip: "",
      },

      visible:false
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/center");
    },

    goL() {
      this.$router.push("/login");
    },

    checkUname() {
      if (this.uname.username != "") {
        this.uname.tip = "";
        return true;
      } else {
        this.uname.tip = "用户名不为空";
        return false;
      }
    },

    checkUphone() {
      let res =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      if (this.uphone.phone != "") {
        if (res.test(this.uphone.phone)) {
          this.uphone.tip = "";
          return true;
        } else {
          this.uphone.tip = "手机号格式错误";
          return false;
        }
      } else {
        this.uphone.tip = "请输入11位手机号";
        return false;
      }
    },

    checkUaccount() {
      if (this.uaccount.account != "" && this.uaccount.account.length >= 3) {
        this.uaccount.tip = "";
        return true;
      } else {
        this.uaccount.tip = "账号长度不小于3位";
        return false;
      }
    },

    checkUpwd() {
      this.checkUnewpwd();
      if (this.upwd.pwd != "" && this.upwd.pwd.length >= 6) {
        this.upwd.tip = "";
        return true;
      } else {
        this.upwd.tip = "请输入长度为6位或者长度大于6位的密码";
        return false;
      }
    },

    checkUnewpwd() {
      if (this.upwd.pwd != "" && this.unewpwd.newpwd != "") {
        if (this.upwd.pwd == this.unewpwd.newpwd) {
          this.unewpwd.tip = "";
          return true;
        } else {
          this.unewpwd.tip = "两次输入密码不一致";
          return false;
        }
      } else {
        this.unewpwd.tip = "密码不为空";
        return false;
      }
    },
    ...mapMutations("user", ["show", "userInfo"]),
    toRegistered() {
      this.checkUpwd();
      //当所有输入错误的提示语都为空时,进入下一层验证
      if (
        this.uname.tip == "" &&
        this.uphone.tip == "" &&
        this.uaccount.tip == "" &&
        this.upwd.tip == "" &&
        this.unewpwd.tip == ""
      ) {
        if (
          this.checkUname() &&
          this.checkUphone() &&
          this.checkUaccount() &&
          this.checkUpwd() &&
          this.checkUnewpwd()
        ) {
          if (
            this.uname.username != "" &&
            this.uphone.phone != "" &&
            this.uaccount.account != "" &&
            this.upwd.pwd != "" &&
            this.unewpwd.newpwd != ""
          ) {
            let Myuser = {
              nickname: this.uname.username,
              phone: this.uphone.phone,
              account: this.uaccount.account,
              password: this.unewpwd.newpwd,
            };

            //向后台提交用户注册信息
            this.axios
              .post(`/api/public/addUser`, Myuser, {
                headers: {
                  "Content-Type": "application/json",
                },
              })
              .then((res) => {
                if (res.status === 200) {
                  console.log(Myuser);
                  this.$toast.success({
                    duration: 1000,
                    message: "注册成功",
                  });

                  let userInfo = {
                    uname: this.uname.username,
                    uimg: "",
                  };
                  //存放到vuex
                  this.userInfo(userInfo);
                  this.show(1);
                  this.$router.push("/center");
                  //重置
                  this.Reset();
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
        } else {
          console.log("注册失败");
        }
      }
    },

    //表单重置
    Reset() {
      this.uname.username = "";
      this.uname.tip = "用户名不为空";
      this.uphone.phone = "";
      this.uphone.tip = "请输入11位手机号";
      this.uaccount.account = "";
      this.uaccount.tip = "'账号长度不小于3位";
      this.upwd.pwd = "";
      this.upwd.tip = "请输入长度为6位或者长度大于6位的密码";
      this.unewpwd.newpwd = "";
      this.unewpwd.tip = "";
    },
  },
  mounted() {},
  created() {
    setTimeout(() => {
      this.visible = true;
    }, 200);
  },
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

[v-cloak] {
  display: none !important;
}

:deep(.van-icon-arrow-left) {
  color: gray !important;
}

.btn {
  width: 96% !important;
  margin: 0 2%;
  height: 1rem;
  margin-top: 0.3rem;
}

.reset {
  background-color: rgb(247, 137, 137);
  border: none;
  margin-top: 0.2rem;
}

p {
  text-align: center;
  color: gray;
  margin-top: 0.2rem;
}
</style>
